import QtQuick 1.0

Rectangle {
    width: 360
    height: 640
    id: screen
    SplashScreen{
         id: splashScreen
         image: "qrc:/splash"
         timeout: 2000;
         onTimeout: screen.state = "vocabularySelectionView"
         z: 100;
     }

    Image {
        width: 360
        height: 640
        source: "qrc:/Keilalahti"
    }

    Image {
        id: banner
        source: "qrc:/topBanner_large"

        Image {
            x: 70
            anchors.verticalCenter: parent.verticalCenter
            source: "qrc:/BinGoo"
        }
    }

    Commandbutton{
        id: commandButton

        anchors.right:  parent.right
        anchors.rightMargin: 5
        anchors.top:  parent.top
        anchors.topMargin: 5
        onStateChancgeRequested: {screen.state=commandButton.previousView}
    }

    /*
      Game Views
    */
    VocabularySelectionView{
        id: vocabularySelectionView
    }

    WordSelectionView{
        id: wordSelectionView
        gameView: gameView
    }

    GameView{
        id: gameView
    }


    states: [

        State {
            name: "vocabularySelectionView"
            PropertyChanges { target: vocabularySelectionView; opacity: 1 }
            PropertyChanges { target: wordSelectionView; opacity: 0     }

            StateChangeScript {
                script: commandButton.previousView = "";
            }


         },
        State {
            name: "wordSelectionView"
            PropertyChanges { target: wordSelectionView; opacity: 1 }
            PropertyChanges { target: vocabularySelectionView; opacity: 0 }
            PropertyChanges { target: gameView; opacity: 0          }
            StateChangeScript {
                script: commandButton.previousView = "vocabularySelectionView";
            }
        },
        State {
            name: "gameView"
            PropertyChanges { target: gameView; opacity: 1          }
            PropertyChanges { target: wordSelectionView; opacity: 0 }
            PropertyChanges { target: vocabularySelectionView; opacity: 0 }
            StateChangeScript {
                script: commandButton.previousView = "wordSelectionView";
            }

        }
    ]

    transitions: Transition {
        PropertyAnimation { properties: "opacity"; duration: 600 }
    }

}
